<template>
  <div>
    <div class="card" style="min-height: 258px;">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="title">公告栏</div>
        </el-col>
        <el-col :span="12">
          <div class="title">公告要闻</div>
          <div v-for="item in msg_003" :key="item.id" style="padding-left:5px;">
            <el-link :style="'color:'+(item.important==1?'red':'')" :underline="false" class="link" @click="msgDetail(item)">※ {{ item.title }}&nbsp;&nbsp;&nbsp;{{ item.pub_time }}</el-link>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="card" style="margin-top: 10px;">
      <el-descriptions class="margin-top" :column="2" :size="size" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-message" />
            客户服务邮箱
          </template>
          kaide@cmsn.biz
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone" />
            技术服务电话
          </template>
          18011105587
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone" />
            业务咨询电话
          </template>
          18011105587
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-position" />
            系统快速指南
          </template>
          掌心智慧SRM系统用户手册--厂内用户.pdf
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="card" style="margin-top: 10px;">
      <div style="border-bottom: 1px solid #F3F4F5;font-size: 14px;padding-bottom: 5px;color: #169bd5;">最新个人消息通知</div>
      <div v-for="item in msg_002" :key="item.id" style="padding-left:5px;margin-top: 5px;">
        <el-link :style="'color:'+(item.important==1?'red':'')" :underline="false" class="link" @click="msgDetail(item)">※ {{ item.title }}&nbsp;&nbsp;&nbsp;{{ item.pub_time }}</el-link>
      </div>
    </div>
    <vxe-modal
      id="msgDialog"
      v-model="msgDialog"
      :destroy-on-close="true"
      :fullscreen="true"
      title="详情"
    >
      <template #default>
        <!-- <MsgInfo :row="info" /> -->
      </template>
    </vxe-modal>
  </div>
</template>

<script>
// import * as api from '@/api/msg/msg.js'
// import MsgInfo from '@/views/services/msg/info'

export default {
  // components: {
  //   MsgInfo
  // },
  data() {
    return {
      msg_003: [],
      msg_002: [],
      msgDialog: false,
      info: {}
    }
  },
  created() {
    this.getMsg3()
    this.getMsg2()
  },
  methods: {
    // getMsg3() {
    //   api.getMsg('003').then(res => {
    //     this.msg_003 = res.list
    //   })
    // },
    // getMsg2() {
    //   api.getMsg('002').then(res => {
    //     this.msg_002 = res.list
    //   })
    // },
    // msgDetail(row) {
    //   this.info = row
    //   this.msgDialog = true
    // }
  }
}
</script>

<style lang="scss" scoped>
.card {
  padding: 10px;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.05);
}

.title {
  text-align: center;
  color: #169bd5;
  font-size: 22px;
  font-weight: bold;
}

.link{
  white-space: nowrap;
  display: block;
  text-overflow:ellipsis;
  overflow:hidden;
}
</style>
